<template>
    <div class="my-header" :style="{backgroundColor:background,color}">{{title}}</div>
  </template>
  
  <script>
    // 目标: 让Header组件支持不同的项目 - 自定义
    // 1. 分析哪些可以自定义 (背景色, 文字颜色, 文字内容)
    // 2. (新) 可以对props的变量的值 进行校验
    // 3. 内部使用props变量的值
    // 4. 外部使用时, 遵守变量名作为属性名, 值的类型遵守
  export default {
     props:{
       background:String, // 外部插入此变量的值, 必须是字符串类型, 否则报错
       color:{
         type:String,   // 约束color值的类型
         default: "#fff",   // color变量默认值(外部不给 我color传值, 使用默认值)
       },
       title:{
         type:String,    
         required:true,  //进行校验,约束必须传入此值
       }
     }
  }
  </script>
  
  <style lang="less" scoped>
    .my-header {
      height: 45px;
      line-height: 45px;
      text-align: center;
      background-color: #1d7bff;
      color: #fff;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      z-index: 2;
    }
  </style>